<template>
  <view class="container">
    <view>
      <u-navbar
        backIconColor="#fff"
        title-size="36"
        title="云盟商联盟"
        :is-back="true"
        :background="background"
        :border-bottom="false"
        title-color="#fff"
      >
      </u-navbar>
      <view class="" style="position: relative">
        <view
          class="contentBg"
          :style="{
            paddingTop: `${statusBarHeight + navbarHeight}px`,
            backgroundImage: `url(${getImageUrl('alli-bg.png')})`,
            height: `${224 + statusBarHeight}px`,
            top: `-${statusBarHeight + navbarHeight}px`
          }"
        >
        </view>
      </view>
      <view class="content">
        <view class="top dis-flex flex-y-between flex-y-center">
          <view class="t-l dis-flex">
            <u-avatar :src="userInfo.avatar" size="120"></u-avatar>
            <view class="u-info">
              <view>{{ userInfo.nickname }}</view>
              <view class="id" v-if="allianceInfo">{{ allianceInfo.typeName }}</view>
              <!-- <view class="id" v-else>云盟商户</view> -->
            </view>
          </view>
          <view class="t-r dis-flex flex-y-between flex-x-top">
            <view class="dis-flex flex-y-center" @click="toRule">
              <u-icon style="margin-right: 10rpx" name="/static/tishi.png" size="28"></u-icon>
              <text>权益说明</text>
            </view>
            <!-- <view class="dis-flex flex-y-center" @click="routeTo('/alliance/active-list')">
							<text>当前2.0活跃值</text>
							<u-icon style="margin-left: 10rpx;" name="/static/right.png" size="20"></u-icon>
						</view> -->
          </view>
        </view>
        <!-- <view class="card dis-flex flex-y-between" v-if="isUser">
					<view class="amount-item" @click="routeTo(amount.path)" v-for="(amount,i) in userAmount" :key="i">
						<view class="count">{{amount.count}}</view>
						<view class="name">{{amount.name}}</view>
					</view>
				</view> -->
        <!-- <view class="card dis-flex flex-y-between"> -->

        <!-- <view class="amount-item"  @click="routeTo(amount.path)" v-for="(amount,i) in companyAmount" :key="i">
						<u-icon :name="amount.icon" size="90"></u-icon>
						<view class="name">{{amount.name}}</view>
						<view class="count">{{amount.count}}</view>
					</view> -->
        <!-- </view> -->

        <view
          v-if="menuList4 && menuList4.length > 0"
          class="card menuView"
          style="margin-top: 0; margin-bottom: 40rpx"
        >
          <u-grid :col="4" :border="false" style="border-radius: 0 0 10rpx 10rpx">
            <u-grid-item
              :custom-style="{ padding: '20rpx 0px' }"
              @click="allianceMenu(item, false)"
              v-for="(item, index) in menuList4"
              :key="index"
              :index="index"
            >
              <view class="gridView">
                <u-image :src="item.picUrl" width="80rpx" height="80rpx"></u-image>
                <view class="gridText" style="margin-top: 10rpx">{{ item.title }}</view>
                <view class="a-d-c" style="margin-top: 10rpx"
                  >{{ item.number ? item.number : 0 }}
                </view>
              </view>
            </u-grid-item>
          </u-grid>
        </view>

        <view class="user-service" v-if="isUser">
          <view
            class="service-item dis-flex flex-y-between flex-y-center"
            @click="routeTo(ser.path)"
            v-for="(ser, index) in userServices"
            :key="ser.id"
          >
            <view class="dis-flex flex-y-center">
              <u-icon :name="ser.icon" size="44"></u-icon>
              <view class="service-name">{{ ser.name }}</view>
            </view>
            <view>
              <u-image src="@/static/more.png" width="14rpx" height="28rpx"></u-image>
            </view>
          </view>
        </view>
        <view class="service" v-else>
          <view
            class="service-item dis-flex flex-y-center"
            @click="routeTo(ser.path)"
            v-for="(ser, index) in companyServices"
            :key="ser.id"
          >
            <u-icon :name="ser.icon" size="90"></u-icon>
            <view class="service-name">{{ ser.name }}</view>
          </view>
        </view>
        <u-gap height="20"></u-gap>
        <view class="guangg" v-if="task">
          <view class="gg-top dis-flex flex-y-center">
            <view class="shu"></view>
            <view class="tl">每日签到</view>
            <view class="des">注：商家/用户每日必签到精选广告</view>
          </view>
          <u-line color="#E9EDF0"></u-line>
          <view class="gg-list">
            <view class="gg-item dis-flex flex-y-between flex-y-center">
              <view class="l dis-flex flex-y-center">
                <u-image width="120" height="160" :src="`${getImageUrl('gg.png')} `"></u-image>
                <view class="item-con">
                  <view class="name"
                    >看精选广告得任务（{{ task.completeDailyTasks }}/{{ task.requireDailyTasks }}）
                  </view>
                  <view class="sl">单日完成任务数量</view>
                </view>
              </view>
              <view
                class="bt"
                @click="routeTo('/alliance/adver')"
                v-if="task.completeDailyTasks < task.requireDailyTasks"
                >领任务
              </view>
              <view class="bt bt-complete" v-else>已完成</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      userInfo: uni.getStorageSync('userInfo'),
      isUser: true,
      companyAmount: [
        {
          id: 'post',
          name: '联盟豆',
          icon: '/static/alliance/lmd.png',
          count: 0,
          path: '/alliance/beans'
        },
        {
          id: 'syc',
          name: '收益池',
          icon: '/static/alliance/syc.png',
          count: 0,
          path: '/alliance/income'
        },
        {
          id: 'fhc',
          name: '分红池',
          icon: '/static/alliance/fhc.png',
          count: 0,
          path: '/alliance/dillery'
        }
      ],
      companyServices: [
        {
          id: 'ggtf',
          name: '广告投放',
          icon: '/static/alliance/ggtf.png',
          path: '/alliance/store/push-adver'
        },
        {
          id: 'zwgl',
          name: '我的投放',
          icon: '/static/alliance/wdtf.png',
          path: '/alliance/store/my-adver-list'
        },
        {
          id: 'lmsc',
          name: '云盟商城',
          icon: '/static/alliance/lmsc.png',
          path: '/alliance/goods'
        },
        {
          id: 'wdxx',
          name: '订单列表',
          icon: '/static/alliance/ddlb.png',
          path: '/goods/order-list/order-list'
        }
      ],
      userServices: [
        {
          id: 'lmsc',
          name: '云盟商城',
          icon: '/static/alliance/lmsc-u.png',
          path: '/alliance/goods'
        },
        {
          id: 'wdxx',
          name: '订单列表',
          icon: '/static/alliance/ddlb-u.png',
          path: '/goods/order-list/order-list'
        }
      ],
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      imgStyle: {
        width: '12rem'
      },
      statusBarHeight: systemInfo.statusBarHeight,
      allianceInfo: null,
      task: null,
      menuList4: []
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  onLoad() {
    this.isUser = !this.userInfo.isMerchant
  },
  onShow() {
    this.$u.get('/app-api/member/cloud-alliance-user/center').then((res) => {
      this.allianceInfo = res.data.user
      this.companyAmount[0].count = res.data.digitalAssets.cryptocurrencyOrigin
      this.companyAmount[1].count = res.data.digitalAssets.cryptocurrencyIncreasing
      this.companyAmount[2].count = res.data.digitalAssets.bonus
    })
    this.$u.get('/app-api/member/cryptocurrency-increment/available').then((res) => {
      this.task = res.data
    })
    this.$u.get('/app-api/member/digital-assets/get-menu').then((res) => {
      this.menuList4 = res.data //todo
    })
  },
  methods: {
    toRule() {
      uni.navigateTo({
        url: '/universal/webcontent/webcontent?key=yunmengshang_quanyi'
      })
    },

    handleScroll(e) {
      // 页面滚动时触发
      this.scrollTop = e.detail.scrollTop // 更新滚动位置
      // console.log('页面上滑', this.scrollTop);
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    changeType() {
      const app = this
      uni.showLoading({
        title: '切换中',
        mask: true
      })
      setTimeout(function () {
        app.isUser = !app.isUser
        uni.hideLoading()
      }, 500)
    },
    allianceMenu(item) {
      if (item && item.linkUrl && item.linkUrl.length > 1) {
        this.$utils.route(item.linkUrl)
        return
      }
      if (item && item.subIdentify) {
        if (item.subIdentify == 'lianmengdou') {
          this.$utils.route('/alliance/beans')
          return
        }
        if (item.subIdentify == 'shouyidou') {
          this.$utils.route('/alliance/shouyidou')
          return
        }
        if (item.subIdentify == 'fenhongdou') {
          this.$utils.route('/alliance/dillery')
          return
        }
        if (item.subIdentify == 'gongyixunzhang') {
          this.$u.toast('敬请期待！')
          return
        }
      }
      this.$utils.route('/alliance/user')
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-box {
  width: 100%;
  height: 100%;
  padding: 20rpx;
}

.container {
  height: 100vh;
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  // height: 448rpx;
}

.content {
  position: relative;
  padding: 39rpx 0;

  .top {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    height: 120rpx;

    .u-info {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding: 12rpx 20rpx;
      font-size: 34rpx;
      color: #ffffff;

      .id {
        width: 120rpx;
        height: 40rpx;
        line-height: 40rpx;
        background: #e8fffc;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #10a28f;
        text-align: center;
      }
    }

    .t-r {
      flex-flow: column;
      height: 120rpx;
      padding: 12rpx 0;
      align-items: flex-end;
      color: #fff;
      font-size: 24rpx;
    }
  }

  .card {
    height: 280rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 46rpx 20rpx;
    margin: 0 20rpx;
  }

  .amount-item {
    text-align: center;
    height: 100%;
    justify-content: space-between;
    display: flex;
    flex-flow: column;

    .count {
      font-size: 32rpx;
      font-weight: bold;
    }

    .name {
      font-size: 26rpx;
    }
  }

  .service {
    // width: 100%;
    margin: 0 20rpx;
    height: 200rpx;
    background: #ffffff;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    padding: 30rpx;

    .service-item {
      // width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-flow: column;
      font-size: 26rpx;
      color: #333333;

      .service-name {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}

.mr-20 {
  margin-right: 40rpx;
}

.guangg {
  padding: 30rpx 20rpx;
  height: auto;
  background: #ffffff;
  border-radius: 10rpx;
  margin: 0 20rpx;

  .gg-top {
    margin-bottom: 30rpx;

    .shu {
      width: 8rpx;
      height: 40rpx;
      background: #10a28f;
      border-radius: 3rpx;
    }

    .tl {
      font-weight: 600;
      font-size: 36rpx;
      color: #333333;
      margin-left: 20rpx;
    }

    .des {
      font-size: 24rpx;
      color: #999999;
      margin-left: 10rpx;
      margin-top: 4rpx;
    }
  }

  .gg-list {
    margin-top: 30rpx;

    .gg-item {
      height: 160rpx;
    }

    .item-con {
      padding: 20rpx;
      height: 160rpx;
      display: flex;
      flex-flow: column;
      justify-content: space-between;

      .name {
        font-weight: 600;
        font-size: 30rpx;
      }

      .sl {
        font-size: 24rpx;
        color: #999999;
      }
    }

    .bt {
      width: 96rpx;
      height: 50rpx;
      background: #10a28f;
      border-radius: 25rpx;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 50rpx;
      text-align: center;
    }

    .bt-complete {
      background: #ff9900;
    }
  }
}

.user-service {
  padding: 0 20rpx;

  .service-item {
    height: 120rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin-top: 20rpx;
    padding: 20rpx;
    font-size: 30rpx;

    .service-name {
      margin-left: 20rpx;
    }
  }
}

.gridView {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  border: none;
}
</style>
